<template>
    <div class="content">
        <!-- <van-popup v-model="show1" position="bottom">
             <van-datetime-picker
                     v-model="currentDate"
                     type="date"
                     @confirm="ok"
                     @cancel="quxiao"
             />
         </van-popup>
         <div>
             <div class="title">人员基本信息</div>
             <van-field
                     v-model="nick_name"
                     label="姓名："
                     @blur.prevent="changeCount"
                     type="text"
                     placeholder="请输入姓名"
                     @focus="bodyScrollTop"
                     class="suggest"
             />
             <div class="suggest van-cell van-field">
                 <div class="van-cell__title van-field__label">
                     <span>性别：</span>
                 </div>
                 <div class="van-cell__value">
                     <div class="van-field__body">
                         <van-radio-group v-model="sex_radio">
                             <van-radio name="男" value="男" icon-size="18px">男</van-radio>
                             <van-radio name="女" value="女" icon-size="18px">女</van-radio>
                         </van-radio-group>
                     </div>
                 </div>
             </div>
             <van-field
                     v-model="work"
                     label="工作单位："
                     type="text"
                     placeholder="请输入工作单位"
                     @focus="bodyScrollTop"
                     class="suggest"
             />
             <van-field
                     v-model="tel"
                     type="number"
                     label="联系电话："
                     @focus="bodyScrollTop"
                     placeholder="请输入联系电话"
             />
             <div class="suggest van-cell van-field">
                 <span>现居区域：</span>
                 <van-dropdown-menu>
                     <van-dropdown-item v-model="idqu" :options="xinlistqu" @change="quyu"/>
                 </van-dropdown-menu>
             </div>
             <div class="suggest van-cell van-field">
                 <span>现居街道：</span>
                 <van-dropdown-menu>
                     <van-dropdown-item v-model="idjie" :options="xinlistjie" @change="jiedao"/>
                 </van-dropdown-menu>
             </div>
             <div class="suggest van-cell van-field">
                 <span>现居社区：</span>
                 <van-dropdown-menu>
                     <van-dropdown-item v-model="idshe" :options="xinlistshe"/>
                 </van-dropdown-menu>
             </div>
             <van-field
                     v-model="dizhi"
                     type="text"
                     label="具体地址："
                     @focus="bodyScrollTop"
                     placeholder="请输入具体地址"
             />
         </div>
         <div class="other-info">
             <div class="title">自检信息</div>
             <div class="suggest van-cell van-field">
                 <div class="van-cell__title van-field__label">
                     <span>是否发热：</span>
                 </div>
                 <div class="van-cell__value">
                     <div class="van-field__body">
                         <van-radio-group v-model="fare">
                             <van-radio name="0" value="0" icon-size="18px">否</van-radio>
                             <van-radio name="1" value="1" icon-size="18px">是</van-radio>
                         </van-radio-group>
                     </div>
                 </div>
             </div>
             <div class="suggest van-cell van-field" v-if="fare == 1">
                 <div class="van-cell__title van-field__label">
                     <span>个人体温：</span>
                 </div>
                 <div class="van-cell__value">
                     <div class="van-field__body">
                         <input v-model="tiwen" type="number" placeholder="请输入体温" class="van-field__control"
                                @focus="bodyScrollTop">
                     </div>
                 </div>
             </div>
             <div class="suggest van-cell van-field">
                 <div class="van-cell__title van-field__label">
                     <span>是否干咳：</span>
                 </div>
                 <div class="van-cell__value">
                     <div class="van-field__body">
                         <van-radio-group v-model="ganke">
                             <van-radio name="0" value="0" icon-size="18px">否</van-radio>
                             <van-radio name="1" value="1" icon-size="18px">是</van-radio>
                         </van-radio-group>
                     </div>
                 </div>
             </div>
             <div class="suggest van-cell van-field">
                 <div class="van-cell__title van-field__label">
                     <span>是否乏力：</span>
                 </div>
                 <div class="van-cell__value">
                     <div class="van-field__body">
                         <van-radio-group v-model="fali">
                             <van-radio name="0" value="0" icon-size="18px">否</van-radio>
                             <van-radio name="1" value="1" icon-size="18px">是</van-radio>
                         </van-radio-group>
                     </div>
                 </div>
             </div>
             <div class="suggest van-cell van-field">
                 <div class="van-cell__title van-field__label">
                     <span>是否咽痛：</span>
                 </div>
                 <div class="van-cell__value">
                     <div class="van-field__body">
                         <van-radio-group v-model="yantong">
                             <van-radio name="0" value="0" icon-size="18px">否</van-radio>
                             <van-radio name="1" value="1" icon-size="18px">是</van-radio>
                         </van-radio-group>
                     </div>
                 </div>
             </div>
             <div class="suggest van-cell van-field">
                 <div class="van-cell__title van-field__label radio-item">
                     <span>是否接触过疑似人员：</span>
                 </div>
                 <div class="van-cell__value">
                     <div class="van-field__body">
                         <van-radio-group v-model="jiechuyisi">
                             <van-radio name="0" value="0" icon-size="18px">否</van-radio>
                             <van-radio name="1" value="1" icon-size="18px">是</van-radio>
                         </van-radio-group>
                     </div>
                 </div>
             </div>
             <div class="suggest van-cell van-field" v-if="jiechuyisi == 1">
                 <div class="van-cell__title van-field__label">
                     <span>接触人情况：</span>
                 </div>
                 <div class="van-cell__value">
                     <div class="van-field__body">
                         <input v-model="yisi_name" type="text" placeholder="请输入接触人情况" class="van-field__control"
                                @focus="bodyScrollTop">
                     </div>
                 </div>
             </div>
             <div class="suggest van-cell van-field">
                 <div class="van-cell__title van-field__label radio-item">
                     <span>是否接触过确诊人员：</span>
                 </div>
                 <div class="van-cell__value">
                     <div class="van-field__body">
                         <van-radio-group v-model="jiechuquezhen">
                             <van-radio name="0" value="0" icon-size="18px">否</van-radio>
                             <van-radio name="1" value="1" icon-size="18px">是</van-radio>
                         </van-radio-group>
                     </div>
                 </div>
             </div>
             <div class="suggest van-cell van-field" v-if="jiechuquezhen == 1">
                 <div class="van-cell__title van-field__label">
                     <span>接触人情况：</span>
                 </div>
                 <div class="van-cell__value">
                     <div class="van-field__body">
                         <input v-model="quezhen_name" type="text" placeholder="请输入接触人情况" class="van-field__control"
                                @focus="bodyScrollTop">
                     </div>
                 </div>
             </div>
         </div>
         &lt;!&ndash;   <div class="tou">
                <div class="title">回(入)沈情况</div>
                <div class="suggest van-cell van-field">
                    <div class="van-cell__title van-field__label">
                        <span>回(入)沈时间：</span>
                    </div>
                    <div class="van-cell__value" @click="shijian">
                        <div class="van-field__body">
                            <input v-model="go_time" type="text" placeholder="请选择回(入)沈时间" class="van-field__control"
                                   @focus="bodyScrollTop">
                        </div>
                    </div>
                </div>
                <div class="suggest van-cell van-field">
                    <div class="van-cell__title van-field__label">
                        <span>回(入)沈途经：</span>
                    </div>
                    <div class="van-cell__value">
                        <div class="van-field__body">
                            <input v-model="tujingdi" type="text" placeholder="请输入回(入)沈途经地" class="van-field__control"
                                   @focus="bodyScrollTop">
                        </div>
                    </div>
                </div>
                <div class="div1">
                    <div class="van-cell van-field">
                        <div class="van-cell__title van-field__label radio-item">
                            <span>回(入)沈前出发地：</span>
                        </div>
                        <div class="van-cell__value" @click="chufa">
                            <div class="van-field__body">
                                {{chufadi}}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="suggest van-cell van-field">
                    <div class="van-cell__title van-field__label radio-item">
                        <span>回(入)沈后活动轨迹：</span>
                    </div>
                    <div class="van-cell__value">
                        <div class="van-field__body">
                            <input v-model="guiji" type="text" placeholder="请输入回(入)沈后活动轨迹" class="van-field__control">
                        </div>
                    </div>
                </div>
            </div>&ndash;&gt;
         <div class="div-bot">
             <div class="city-card-common-btn" @click="submit">提交</div>
         </div>
         <van-popup v-model="areaItem" position="bottom" :style="{ height: '40%' }">
             <van-area :area-list="AreaList"
                       value="210100"
                       @confirm="yes"
                       @cancel="close"
             />
         </van-popup>-->

        <van-form colon @submit="onSubmit" validate-first @failed="onFailed">
            <div class="title">人员基本信息</div>
            <van-field
                    v-model="formItem.nick_name"
                    name="name"
                    label="真实姓名"
                    placeholder="请填写真实姓名"
                    :maxlength="20"></van-field>
            <van-field name="sex" label="性别">
                <template #input>
                    <van-radio-group v-model="formItem.sex" direction="horizontal">
                        <van-radio name="男" icon-size="18px">男</van-radio>
                        <van-radio name="女" icon-size="18px">女</van-radio>
                    </van-radio-group>
                </template>
            </van-field>
            <van-field
                    v-model="formItem.work"
                    label="工作单位"
                    type="text"
                    placeholder="请输入工作单位"
                    @focus="bodyScrollTop"
                    class="suggest"
            />
            <van-field v-model="formItem.tel" name="tel" label="联系电话" placeholder="请填写有效手机号"
                       @focus="bodyScrollTop" @blur="bodyScrollTop"/>
            <van-field
                    readonly
                    clickable
                    name="area"
                    :value="formItem.area"
                    label="地区选择"
                    placeholder="点击选择区/街道"
                    @click="showArea = true"
            />
            <van-popup v-model="showArea" position="bottom">
                <van-picker show-toolbar
                            title="选择区域"
                            @cancel="showArea=false"
                            @confirm="onSyAreaConfirm"
                            :columns="getSyAreaData"/>
            </van-popup>

            <van-field
                    readonly
                    clickable
                    name="street"
                    :value="formItem.street"
                    label="选择街道"
                    placeholder="点击选街道"
                    @click="showStreet = true"
            />
            <van-popup v-model="showStreet" position="bottom">
                <van-picker show-toolbar
                            title="选择街道"
                            @cancel="showStreet=false"
                            @confirm="onSyStreetConfirm"
                            :columns="getSyStreetData"/>
            </van-popup>

            <van-field
                    readonly
                    clickable
                    name="community"
                    :value="formItem.community"
                    label="选择社区"
                    placeholder="点击选社区"
                    @click="showCommunity = true"
            />
            <van-popup v-model="showCommunity" position="bottom">
                <van-picker show-toolbar
                            title="选择社区"
                            @cancel="showCommunity=false"
                            @confirm="onSyCommunityConfirm"
                            :columns="communityList"/>
            </van-popup>
            <!-- <div class="suggest van-cell van-field">
                 <span>现居区域：</span>
                 <van-dropdown-menu>
                     <van-dropdown-item v-model="formItem.region" :options="xinlistqu" @change="quyu"/>
                 </van-dropdown-menu>
             </div>
             <div class="suggest van-cell van-field">
                 <span>现居街道：</span>
                 <van-dropdown-menu>
                     <van-dropdown-item v-model="idjie" :options="xinlistjie" @change="jiedao"/>
                 </van-dropdown-menu>
             </div>
             <div class="suggest van-cell van-field">
                 <span>现居社区：</span>
                 <van-dropdown-menu>
                     <van-dropdown-item v-model="idshe" :options="xinlistshe"/>
                 </van-dropdown-menu>
             </div>-->
            <van-field
                    v-model="formItem.address"
                    type="text"
                    label="具体地址"
                    @focus="bodyScrollTop"
                    placeholder="请输入具体地址"
            />
            <div class="other-info">
                <div class="title">自检信息</div>
                <div class="suggest van-cell van-field">
                    <div class="van-cell__title van-field__label">
                        <span>是否发热：</span>
                    </div>
                    <div class="van-cell__value">
                        <div class="van-field__body">
                            <van-radio-group v-model="formItem.isfare">
                                <van-radio name="0" value="0" icon-size="18px">否</van-radio>
                                <van-radio name="1" value="1" icon-size="18px">是</van-radio>
                            </van-radio-group>
                        </div>
                    </div>
                </div>
                <div class="suggest van-cell van-field" v-if="formItem.isfare == 1">
                    <div class="van-cell__title van-field__label">
                        <span>个人体温：</span>
                    </div>
                    <div class="van-cell__value">
                        <div class="van-field__body">
                            <input v-model="formItem.tiwen" type="number" placeholder="请输入体温" class="van-field__control"
                                   @focus="bodyScrollTop">
                        </div>
                    </div>
                </div>
                <div class="suggest van-cell van-field">
                    <div class="van-cell__title van-field__label">
                        <span>是否干咳：</span>
                    </div>
                    <div class="van-cell__value">
                        <div class="van-field__body">
                            <van-radio-group v-model="formItem.isganke">
                                <van-radio name="0" value="0" icon-size="18px">否</van-radio>
                                <van-radio name="1" value="1" icon-size="18px">是</van-radio>
                            </van-radio-group>
                        </div>
                    </div>
                </div>
                <div class="suggest van-cell van-field">
                    <div class="van-cell__title van-field__label">
                        <span>是否乏力：</span>
                    </div>
                    <div class="van-cell__value">
                        <div class="van-field__body">
                            <van-radio-group v-model="formItem.fatigue">
                                <van-radio name="0" value="0" icon-size="18px">否</van-radio>
                                <van-radio name="1" value="1" icon-size="18px">是</van-radio>
                            </van-radio-group>
                        </div>
                    </div>
                </div>
                <div class="suggest van-cell van-field">
                    <div class="van-cell__title van-field__label">
                        <span>是否咽痛：</span>
                    </div>
                    <div class="van-cell__value">
                        <div class="van-field__body">
                            <van-radio-group v-model="formItem.sore">
                                <van-radio name="0" value="0" icon-size="18px">否</van-radio>
                                <van-radio name="1" value="1" icon-size="18px">是</van-radio>
                            </van-radio-group>
                        </div>
                    </div>
                </div>
                <div class="suggest van-cell van-field">
                    <div class="van-cell__title van-field__label radio-item">
                        <span>是否接触过疑似人员：</span>
                    </div>
                    <div class="van-cell__value">
                        <div class="van-field__body">
                            <van-radio-group v-model="formItem.isyisi">
                                <van-radio name="0" value="0" icon-size="18px">否</van-radio>
                                <van-radio name="1" value="1" icon-size="18px">是</van-radio>
                            </van-radio-group>
                        </div>
                    </div>
                </div>
                <div class="suggest van-cell van-field" v-if="formItem.isyisi == 1">
                    <div class="van-cell__title van-field__label">
                        <span>接触人情况：</span>
                    </div>
                    <div class="van-cell__value">
                        <div class="van-field__body">
                            <input v-model="formItem.yisi_name" type="text" placeholder="请输入接触人情况"
                                   class="van-field__control"
                                   @focus="bodyScrollTop">
                        </div>
                    </div>
                </div>
                <div class="suggest van-cell van-field">
                    <div class="van-cell__title van-field__label radio-item">
                        <span>是否接触过确诊人员：</span>
                    </div>
                    <div class="van-cell__value">
                        <div class="van-field__body">
                            <van-radio-group v-model="formItem.isquezhen">
                                <van-radio name="0" value="0" icon-size="18px">否</van-radio>
                                <van-radio name="1" value="1" icon-size="18px">是</van-radio>
                            </van-radio-group>
                        </div>
                    </div>
                </div>
                <div class="suggest van-cell van-field" v-if="formItem.isquezhen == 1">
                    <div class="van-cell__title van-field__label">
                        <span>接触人情况：</span>
                    </div>
                    <div class="van-cell__value">
                        <div class="van-field__body">
                            <input v-model="formItem.quezhen_name" type="text" placeholder="请输入接触人情况"
                                   class="van-field__control"
                                   @focus="bodyScrollTop">
                        </div>
                    </div>
                </div>
            </div>
            <div class="div-bot">
                <van-button round block type="info" native-type="submit" class="city-card-common-btn">
                    提交
                </van-button>
            </div>
        </van-form>
    </div>

</template>

<script>
import mockData from './data/index.js'
export default {
  data () {
    return {
      formItem: {
        nick_name: '',
        sex: '',
        work: '',
        tel: '',
        area_id: '',
        street_id: '',
        community_id: '',
        area: '',
        street: '',
        community: '',
        address: '',
        isfare: '',
        tiwen: '',
        isganke: '',
        isfali: '',
        isyantong: '',
        isyisi: '',
        yisi_name: '',
        isquezhen: '',
        quezhen_name: ''
      },
      areaList: mockData.areaList,
      streetList: mockData.streetList,
      communityList: mockData.communityList,
      showArea: false,
      showStreet: false,
      showCommunity: false
    }
  },
  computed: {
    getSyAreaData () {
      let area = this.areaList
      let app = []
      area.forEach(item => {
        app.push({ text: item.name, id: item.id, company_code: item.company_code })
      })
      return app
    },
    getSyStreetData () {
      let newStreetList = []
      let _this = this.streetList
      this.streetList.forEach(item => {
        if (_this.formItem.area.id === item.pid) {
          let obj = {}
          obj.text = item.name
          obj.company_code = item.company_code
          obj.id = item.id
          newStreetList.push(obj)
        }
      })
      return newStreetList
    },
    getSyCommunityData () {
      let newStreetList = []
      this.communityList.forEach(item => {
        if (this.formItem.street.id === item.pid) {
          let obj = {}
          obj.text = item.name
          obj.company_code = item.company_code
          obj.id = item.id
          newStreetList.push(obj)
        }
      })
      return newStreetList
    }
  },
  methods: {
    // 去苹果机型白边
    bodyScrollTop () {
      document.body && (document.body.scrollTop = 0)
    },
    onSyAreaConfirm (value, index) {
      console.log(value, index, '区域值')
      this.formItem.area = value
      /* this.showArea = false
      this.formItem.area = value
      this.formItem.street = {}
      this.formItem.community = {} */
    },
    onSyStreetConfirm (value, index) {
      /* this.showStreet = false
      this.formItem.street = value
      this.formItem.community = {} */
    },
    onSyCommunityConfirm (value, index) {
      /* this.showCommunity = false
      this.formItem.community = value */
    },
    onSubmit () {
    },

    onFailed () {
    }
  },
  mounted () {
  }
}
</script>

<style scoped>
    .van-radio {
        float: left;
        margin-right: 10px;
    }

    .title {
        width: 100%;
        padding: 0.625rem 0.9375rem;
        font-size: 12px;
    }

    .action-item .van-cell__title {
        -webkit-box-flex: inherit;
        -webkit-flex: inherit;
        flex: inherit;
        width: 5.625rem;
    }

    .find {
        border-radius: 25px;
        background-color: #996666;
        color: white;
        margin-top: 15px;
        height: 33px;
        line-height: 1px;
        margin-left: 2%;
        width: 96%;
    }

    .content {
        width: 100%;
        background-color: #F5F5F5;
    }

    .content >>> .van-cell {
        margin-left: 2%;
        width: 96%;
        font-size: 12px;
    }

    .content >>> .van-dialog__content {
        padding: 10px;
        text-align: center;
    }

    .van-field__control {
        font-size: 12px;
    }

    .content >>> .van-cell__value .van-field__body .van-field__control {
        font-size: 12px;
    }

    .city-card-common-btn {
        color: white;
        font-size: 12px;
        width: 100%;
        border-radius: 5px;
        text-align: center;
        background-color: #75ACDC;
    }

    .div-bot {
        padding: 8px;
    }

    .content >>> .van-cell__value {
        flex: inherit;
        font-size: 12px;
    }

    .van-action-sheet__cancel, .van-action-sheet__item {
        font-size: 12px;
    }

    .van-cell__value span {
        color: black;
    }

    .van-dropdown-menu {
        height: 25px;
    }

    .van-hairline--top-bottom::after {
        border-width: 0px 0px;
    }

    .chaochu >>> .van-cell__value {
        width: 100%;
    }

    .div1 >>> .van-cell__value {
        width: 100%;
    }

    .div2 >>> .van-cell__value {
        width: 100%;
    }

    .other-info .van-field__label.radio-item, .tou .van-field__label.radio-item {
        width: 8.625rem;
    }

    .suggest.van-cell.van-field span {
        width: 5rem;
    }
</style>
